<template lang="pug">
.view.cp-train-assign.fix-flex-pos
  //- 查询
  el-form.tk-search(:inline="true")
    el-form-item
      el-input(v-model="crsName", placeholder="名称或编码", style="width: 160px")
    el-form-item(label="指派类型 : ")
      el-select(v-model="crsType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in typeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="创建人 : ")
      el-select(v-model="crsCreator", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in empSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item
      el-select(v-model="crsDateType", placeholder="请选择", style="width: 108px")
        el-option(key="0", label="到期时间", :value="0")
        el-option(key="1", label="指派时间", :value="1")
    el-form-item
      el-date-picker(
        v-model="crsDateArr"
        type="daterange"
        :clearable="false"
        style="width: 256px"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期")
    el-button(type="primary", @click="resetTime", plain, style="margin-right: 16px") 重置时间
    el-button(type="primary", @click="searchTasks") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
    el-button(type="primary", @click="addAssign") 新建指派
  .tk-table
    el-table(:data="assignList", highlight-current-row, height="100%", size="mini", v-loading="loadingTasks")
      el-table-column(align="center", type="index", label="序号", :fixed="true")
      el-table-column(align="center", show-overflow-tooltip, prop="id", label="课程编码")
      el-table-column(align="center", show-overflow-tooltip, prop="type", label="类型")
        template(slot-scope="scope")
          span {{ scope.row.type | compare-list(typeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="课程组合")
      el-table-column(align="center", show-overflow-tooltip, prop="desc", label="课程")
      el-table-column(align="center", show-overflow-tooltip, prop="version", label="版本")
      el-table-column(align="center", show-overflow-tooltip, prop="creator", label="创建人")
        template(slot-scope="scope")
          span {{ scope.row.creator | compare-list(empSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="assignDate", label="指派时间")
        template(slot-scope="scope")
          span {{ scope.row.assignDate | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="expireDate", label="到期时间")
        template(slot-scope="scope")
          span {{ scope.row.expireDate | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="trainCount", label="培训人数")
      el-table-column(align="center", show-overflow-tooltip, prop="finishCount", label="完成人数")
      el-table-column(align="center", label="操作", min-width="48px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewAssign(scope.row)")
  //- 分页
  el-pagination.tk-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeTaskPage",
    :current-page.sync="currentPage",
    :page-size="20",
    :total="assignListTotal")
  AssignView(:visible="showAssignView", :detail="assignDetail", @close="showAssignView=false")
  AssignEdit(v-if="showAssignEdit", :visible="showAssignEdit", :detail="assignDetail", @close="showAssignEdit=false", @save="saveAssign")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';
import AssignView from '@/components/train/assign/AssignView';
import AssignEdit from '@/components/train/assign/AssignEdit';

export default {
  name: 'traassign',
  components: {
    AssignView,
    AssignEdit
  },
  data() {
    return {
      // search block
      crsName: null,
      crsType: null,
      crsForm: null,
      crsCreator: null,
      crsDateType: 0,
      crsDateArr: [],
      // table block
      assignList: [],
      assignListTotal: 1,
      loadingTasks: true,
      currentPage: 1,
      // view
      assignDetail: {
        cycleType: '0',
        tipType: '0'
      },
      showAssignView: false,
      showAssignEdit: false,
      typeSelect: [
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ],
      typeSelectAll: [
        { name: '全部', value: null },
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'empSelect',
      'empSelectAll'
    ])
  },
  methods: {
    // 搜索
    resetTime () {
      this.crsDateArr = [];
    },
    resetSearch () {
      this.crsName = null;
      this.crsType = null;
      this.crsForm = null;
      this.crsCreator = null;
      this.crsDateType = 0;
      this.crsDateArr = [];
    },
    searchTasks () {
      this.loadingTasks = true;
      setTimeout(() => {
        this.assignList = TrainData.assignList;
        this.assignListTotal = 86;
        this.currentPage = 1;
        this.$message.success('刷新成功');
        this.loadingTasks = false;
      }, 1000);
    },
    // 表格
    addAssign () {
      this.assignDetail = {
        cycleType: '0',
        tipType: '0'
      };
      this.showAssignEdit = true;
    },
    viewAssign (row) {
      // TraApi.getCourseDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      console.log(row.id);
      this.assignDetail = TrainData.assignDetail;
      this.showAssignView = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    saveAssign () {
      console.log(this.assignDetail);
      this.showAssignEdit = false;
    },
    // 翻页
    changeTaskPage (currentPage) {
      console.log(currentPage);
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.assignList = TrainData.assignList;
      this.assignListTotal = 121;
      this.loadingTasks = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-train-assign
  .tk-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .tk-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .tk-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
</style>
